<template>
  <div class="app-header">
    <div class="app-header-dashboard">
      <el-tag @click="changePage(2)"
              type="success" :effect="effect1===2?'dark':'light'">
        工作台
      </el-tag>
      <el-tag @click="changePage(20)"
              type="success" :effect="effect1===20?'dark':'light'">
        历史
      </el-tag>
      <el-tag @click="changePage(10)"
              type="success" :effect="effect1===10?'dark':'light'">
        用户
      </el-tag>
      <el-tag @click="changePage(30)"
              type="success" :effect="effect1===30?'dark':'light'">
        日志
      </el-tag>
    </div>
    <div class="app-header-status">
      <el-tag size="mini"> PLC
        <i :class="[heartbeatPLC?'heartbeat-ok':'heartbeat-ng','el-icon-success']" style="font-size: 14px"></i>
      </el-tag>
      <el-tag size="mini"> 视觉
        <i :class="[heartbeatVM?'heartbeat-ok':'heartbeat-ng','el-icon-success']" style="font-size: 14px"></i>
      </el-tag>
    </div>
    <div class="app-header-time" v-if="isLogin">
      <div style="font-size: 12px">
        {{ logoutTime }}秒后退出登录
      </div>
    </div>
    <div class="app-header-user" @click="permission">
      <i class="el-icon-user-solid " style="font-size: 16px; color: #10ab41; margin-right: 5px;"></i>
      <span>{{ userInfo.UserName || '未登录' }}</span>
    </div>
    <login-dialog :show="showLoginDialog" @close="changeShowLoginDialog"></login-dialog>
  </div>
</template>
<script>


module.exports = {
  name: 'Header',
  components: {
    production: httpVueLoader('../production/Index.vue'),
    LoginDialog: httpVueLoader('./LoginDialog.vue')
  },
  props: {},
  watch: {},
  data () {
    return {
      showProductionDialog: false,
      service: {},
      effect1: 1,
      effect2: 'dark',
      isLogin: false,
      showLoginDialog: false,
      dashboard: 1,
      logoutTime: 180,
      image: 'https://vip.helloimg.com/images/2023/10/07/obCJh5.png',

      heartbeatPLC: false,
      heartbeatMES: false,
      heartbeatVM: false,
      setLogoutTimeInterval: null,
      userInfo: {}
    }
  },
  methods: {
    resetDeadline2 () {
      if (this.isLogin) {
        this.logoutTime = 180;
      }
    },
    setLogoutTime () {
      if (this.isLogin) {
        this.setLogoutTimeInterval = setInterval(() => {
          this.logoutTime -= 1;
          if (this.logoutTime <= 0) {
            clearInterval(this.setLogoutTimeInterval);
            this._logout();
          }
        }, 1000);
      }
    },
    _PLCConnect (v) {
      this.heartbeatPLC = v;
    },
    _MESConnect (v) {
      this.heartbeatMES = v;
    },
    _VMConnect (v) {
      this.heartbeatVM = v;
    },
    changePage (val) {
      this.$emit('menuclick', val);
      this.effect1 = val;
    },
    /**
     * 退出登录
     * @param v
     * @private
     */
    _logout (v) {
      localStorage.removeItem(TokenKey);
      localStorage.removeItem(USER_INFO);
      this.$message({
        type: 'warning',
        message: '登录超时，已退出!'
      });
      this._isLogin();
    },
    permission () {
      if (IsAuth()) {
        let ui = GetUserInfo();
        this.$confirm(`确定退出登录？`, ui.UserName + `【角色：${ui.UserTypeName}】`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this._logout();
          this.$message({
            type: 'warning',
            message: '退出成功!'
          });
          this._isLogin();
        });
      } else {
        this.showLoginDialog = true;
      }
    },
    _isLogin () {
      this.isLogin = IsAuth();
      this.setLogoutTime();
      this.userInfo = GetUserInfo();
    },
    changeShowLoginDialog () {
      this.showLoginDialog = !this.showLoginDialog;
      this._isLogin();

    }
  },
  mounted () {

    this.$EventBus.$on('starting', (v) => {
      this.changePage(v);
    })

    window.PLCConnect = this._PLCConnect;
    window.MESConnect = this._MESConnect;
    window.VMConnect = this._VMConnect;

    this._isLogin();
    GetServiceConfigApi().then(r => {
      if (IsEmpty(r.Data)) {
        return;
      }
      this.service = r.Data;
      localStorage.setItem('service', JSON.stringify(r.Data));
    });
  }
}
</script>

<style scoped>
.app-header {
  font-size: 12px;

  .app-header-dashboard {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: 20px;

    > span {
      width: 80px;
      text-align: center;
      cursor: pointer;
      margin-right: 10px;
    }
  }

  .app-header-status {
    margin-right: 20px;

    .heartbeat-ok {
      color: deepskyblue;
    }

    .heartbeat-ng {
      color: red;
    }
  }

  .app-header-time {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-right: 20px;
  }

  background-color: #ffffff;
  line-height: 45px;
  display: flex;
  justify-content: flex-end;
  padding-right: 50px;

  .app-header-user {
    display: flex;
    align-items: center;
    cursor: pointer;

    > img {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
}
</style>
